<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';

const router = useRouter();
const user = useUserStore();
  const showShare = ref(false);
    const options = [
      { name: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];

    function logoutClick(){
        // 退出登陆 并清空全局数据及本地存储
        user.userInfoFn({token:''})
         // 跳转到登陆页面
         router.push('/login')
    }
</script>
<template>
    <div class="setting">
        <header>
            <van-icon @click="$router.back()" name="arrow-left" />
            <h3>设置</h3>
        </header>

        <div class="personal-info">
            <!-- 分享面板组件 -->
        <van-cell title="个人信息" is-link @click="showShare = true" />
<van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
>
</van-share-sheet>
<van-cell title="账号与安全" is-link @click="showShare = true" />
<van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>

<!-- <van-cell title="关于我们" is-link @click="showShare = true" /> -->
<!-- 单元格 -->
<van-cell title="清除本地缓存" is-link value="20.6MB" />
<van-cell title="关于我们" is-link value="v2.0.1" />

<van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>
</div>


<!-- <div>
    <van-cell title="关于我们" @click="showShare = true" />
<van-share-sheet
  v-model:show="showShare"
  title="立即分享给好友"
  :options="options"
  @select="onSelect"
/>
</div> -->
<p>
<van-button @click="logoutClick" round color="linear-gradient(to right, #ff6034, #ee0a24)">
  退出登陆
</van-button>
</p>
    </div>
</template>

<style lang="scss" scoped>

.setting {
    width: 100%;
    height: 100%;
    background-color: #f7f7f7;
}

.van-icon{
    position: relative;
    right: 160px;
}


.personal-info{
     width: 90%;
     background-color: rgb(255, 255, 255);
     padding: 10px;
     margin: 0 auto;
     border-radius: 10px;
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
}
div {
    margin-top: 20px;
}

p {
    width: 100%;
    margin: 30px auto;
    position: relative;
    left: 35px;
}
.van-button{
    width: 80%;
    height: 40px;
    margin: 0 auto;
}
</style>